import { Tabs, Spin } from 'antd'
import TodoInput from './components/TodoInput'
import TodoList from './components/TodoList'
import{ observer } from 'mobx-react'
import { useStore } from './store'
const { TabPane } = Tabs;

function App() {
  const { 
    todoStore: {
      loading,
      activeKey,
      todos,
      setActiveKey,
      onSetQuery,
      onAdd,
      onDelete,
      onChange
    }
  } = useStore()
  console.log('App start...')
  return (
    <div className="app">
      <h1 className="app-title">添加Todos</h1>
      <TodoInput placeholder='请输入添加todo' handleInput={onAdd} />
      <Tabs activeKey={activeKey} onChange={setActiveKey}>
        <TabPane tab="全部" key="全部"/>
        <TabPane tab="已完成" key="已完成"/>
        <TabPane tab="未完成" key="未完成"/>
      </Tabs>
      <div className="app-wrap">
        <h1 className="app-title">Todo List</h1>
        <TodoInput placeholder='请输入搜索todo' handleInput={onSetQuery} />
        <Spin spinning={loading} tip="加载中~">
          {/* 业务组件， 显示任务列表 */}  
          <TodoList/>
        </Spin>
      </div>
    </div>
  )
}

export default observer(App)
